Notebook icon and infos
共有 7 个文件被更改，包括 86 次插入 和 7 次删除
二进制
app/content/imgs/folder-gray-icon.png
二进制
app/content/imgs/notebook-icon.png
+ 10
- 0
app/scripts/controllers/app-ctrl.js
@@ -20,6 +20,7 @@ angular.module('codexApp.index', [])
|
||
| 20 | 20 |
$scope.files = FileService.getAllFiles(); |
| 21 | 21 |
break; |
| 22 | 22 |
case "Notebooks": |
| 23 |
+ $scope.current_folder = FileService.getNotesDir(); |
|
| 23 | 24 |
$scope.files = FileService.getFolders(); |
| 24 | 25 |
break; |
| 25 | 26 |
case "Notebook": |
@@ -138,4 +139,13 @@ angular.module('codexApp.index', [])
|
||
| 138 | 139 |
return "" + FileService.absoluteToRelativeURL(FileService.getNotesDir(), img_url) |
| 139 | 140 |
} |
| 140 | 141 |
|
| 142 |
+ $scope.shortenPath = function(path) {
|
|
| 143 |
+ if($scope.current_folder != null) {
|
|
| 144 |
+ return FileService.shortenPath(path); |
|
| 145 |
+ } else {
|
|
| 146 |
+ return ""; |
|
| 147 |
+ } |
|
| 148 |
+ |
|
| 149 |
+ } |
|
| 150 |
+ |
|
| 141 | 151 |
}]); |
+ 0
- 1
app/scripts/controllers/note-view-ctrl.js
@@ -35,7 +35,6 @@ angular.module('codexApp.noteView', [])
|
||
| 35 | 35 |
filesystem.readFile($scope.note.path, function(err, data) {
|
| 36 | 36 |
//$scope.note.data = String.fromCharCode.apply(null, data); |
| 37 | 37 |
$scope.note.data = new Buffer(data).toString('utf8')
|
| 38 |
- console.log($scope.note.data); |
|
| 39 | 38 |
if(!$scope.$$phase) {
|
| 40 | 39 |
$scope.$apply(function(){
|
| 41 | 40 |
$scope.html_data = marked($scope.note.data); |
+ 38
- 0
app/scripts/services/file-service.js
@@ -272,6 +272,8 @@ angular.module('codexApp')
|
||
| 272 | 272 |
} |
| 273 | 273 |
|
| 274 | 274 |
var absoluteToRelativeURL = function(current_url, absolute_url) {
|
| 275 |
+ //console.log(current_url); |
|
| 276 |
+ //console.log(absolute_url); |
|
| 275 | 277 |
// split urls and create arrays |
| 276 | 278 |
var current_path = current_url.split('/');
|
| 277 | 279 |
var absolute_path = getUrlParts(absolute_url).pathname.split('/');
|
@@ -295,6 +297,8 @@ angular.module('codexApp')
|
||
| 295 | 297 |
root_path_count = root_path_count + 1; |
| 296 | 298 |
} |
| 297 | 299 |
var count = current_path_count - root_path_count; |
| 300 |
+ console.log(current_path_count + " - " + root_path_count + " = " + count); |
|
| 301 |
+ |
|
| 298 | 302 |
//dif = current_path_count - (absolute_path_count -1); |
| 299 | 303 |
for (var i = 0; i < count; i++) {
|
| 300 | 304 |
absolute_path.shift(); |
@@ -310,6 +314,40 @@ angular.module('codexApp')
|
||
| 310 | 314 |
return absoluteToRelativeURL(current_url, absolute_url); |
| 311 | 315 |
} |
| 312 | 316 |
|
| 317 |
+ var shortenPath = function(path) {
|
|
| 318 |
+ //console.log(current_url); |
|
| 319 |
+ //console.log(absolute_url); |
|
| 320 |
+ // split urls and create arrays |
|
| 321 |
+ var current_path = path.split('/');
|
|
| 322 |
+ var root_path = getUrlParts(notes_dir).pathname.split('/');
|
|
| 323 |
+ // count how many folders the current path has |
|
| 324 |
+ var current_path_count = 0; |
|
| 325 |
+ for (var i = 0; i < current_path.length; i++) {
|
|
| 326 |
+ current_path_count = current_path_count + 1; |
|
| 327 |
+ } |
|
| 328 |
+ var root_path_count = 0; |
|
| 329 |
+ for (var i = 0; i < root_path.length; i++) {
|
|
| 330 |
+ root_path_count = root_path_count + 1; |
|
| 331 |
+ } |
|
| 332 |
+ var diff = current_path_count - root_path_count; |
|
| 333 |
+ var count = current_path_count - diff; |
|
| 334 |
+ console.log(current_path_count + " - " + root_path_count + " = " + count); |
|
| 335 |
+ |
|
| 336 |
+ //dif = current_path_count - (absolute_path_count -1); |
|
| 337 |
+ for (var i = 0; i < count; i++) {
|
|
| 338 |
+ current_path.shift(); |
|
| 339 |
+ } |
|
| 340 |
+ // make the relative path a string again |
|
| 341 |
+ var relative_path = current_path.join('/');
|
|
| 342 |
+ console.log("* Shortened Path: " + relative_path)
|
|
| 343 |
+ return relative_path; |
|
| 344 |
+ } |
|
| 345 |
+ |
|
| 346 |
+ // Absolute to relative URL |
|
| 347 |
+ this.shortenPath = function(path) {
|
|
| 348 |
+ return shortenPath(path); |
|
| 349 |
+ } |
|
| 350 |
+ |
|
| 313 | 351 |
// Get folders |
| 314 | 352 |
|
| 315 | 353 |
var getFolders = function(root) {
|
+ 8
- 3
app/views/index.html
@@ -22,12 +22,17 @@ |
||
| 22 | 22 |
<div class="file-view"> |
| 23 | 23 |
<ul> |
| 24 | 24 |
<li ng-repeat="file in files track by $index" ng-dblclick="openFile(file)" class="file-view-item"> |
| 25 |
- <div class="thumbnail" ng-show="file.type != 'Folder'"> |
|
| 25 |
+ <div class="thumbnail-icon" ng-show="file.type != 'Folder'"> |
|
| 26 | 26 |
<img src="{{getImageURL(file.path)}}" ng-hide="isImage(file.type)">
|
| 27 | 27 |
<img src="{{file.thumbnail}}" ng-show="isImage(file.type)">
|
| 28 | 28 |
</div> |
| 29 |
- <img class="notebook-thumbnail" src="content/imgs/notebook-icon.png" ng-show="file.type == 'Folder'"> |
|
| 30 |
- <div>{{file.title}}</div>
|
|
| 29 |
+ <div class="notebook-icon" ng-show="file.type == 'Folder'"> |
|
| 30 |
+ <img class="notebook-thumbnail" src="content/imgs/folder-gray-icon.png" > |
|
| 31 |
+ <div class="notebook-icon-title">{{file.title}}</div>
|
|
| 32 |
+ <div class="notebook-icon-info">{{file.size}}</div>
|
|
| 33 |
+ </div> |
|
| 34 |
+ <div class="icon-name" ng-show="file.type != 'Folder'">{{file.title}}</div>
|
|
| 35 |
+ <div class="icon-name" ng-show="file.type == 'Folder'">{{file.title}}</div>
|
|
| 31 | 36 |
</li> |
| 32 | 37 |
</ul> |
| 33 | 38 |
</div> |
+ 30
- 3
css/codex.css
@@ -75,7 +75,7 @@ code {
|
||
| 75 | 75 |
|
| 76 | 76 |
/* File View */ |
| 77 | 77 |
|
| 78 |
-.file-view ul li .thumbnail {
|
|
| 78 |
+.file-view ul li .thumbnail-icon {
|
|
| 79 | 79 |
width: 220px; |
| 80 | 80 |
border: 1px solid #999; |
| 81 | 81 |
border-radius: 3px; |
@@ -85,7 +85,7 @@ code {
|
||
| 85 | 85 |
overflow: hidden; |
| 86 | 86 |
} |
| 87 | 87 |
|
| 88 |
-.file-view ul li .thumbnail img {
|
|
| 88 |
+.file-view ul li .thumbnail-icon img {
|
|
| 89 | 89 |
width: 100%; |
| 90 | 90 |
height: auto; |
| 91 | 91 |
} |
@@ -107,13 +107,18 @@ code {
|
||
| 107 | 107 |
margin-bottom: 0px; |
| 108 | 108 |
} |
| 109 | 109 |
|
| 110 |
-.notebook-thumbnail {
|
|
| 110 |
+.notebook-icon {
|
|
| 111 | 111 |
width: 220px; |
| 112 | 112 |
height: 170px; |
| 113 | 113 |
margin-bottom: 5px; |
| 114 | 114 |
overflow: hidden; |
| 115 | 115 |
} |
| 116 | 116 |
|
| 117 |
+.notebook-icon img {
|
|
| 118 |
+ width: 220px; |
|
| 119 |
+ height: 170px; |
|
| 120 |
+} |
|
| 121 |
+ |
|
| 117 | 122 |
pre code.hljs {
|
| 118 | 123 |
display: block; |
| 119 | 124 |
line-height: 2em; |
@@ -171,3 +176,25 @@ code.hljs .hljs-title {
|
||
| 171 | 176 |
height: 100%; |
| 172 | 177 |
padding-top: 2px; |
| 173 | 178 |
} |
| 179 |
+ |
|
| 180 |
+.icon-name {
|
|
| 181 |
+ width: 220px; |
|
| 182 |
+} |
|
| 183 |
+ |
|
| 184 |
+.notebook-icon-title {
|
|
| 185 |
+ position: relative; |
|
| 186 |
+ top: -102px; |
|
| 187 |
+ font-family: Helvetica-Bold; |
|
| 188 |
+ font-size: 18px; |
|
| 189 |
+ color: #000000; |
|
| 190 |
+ line-height: 22px; |
|
| 191 |
+} |
|
| 192 |
+ |
|
| 193 |
+.notebook-icon-info {
|
|
| 194 |
+ position: relative; |
|
| 195 |
+ top: -48px; |
|
| 196 |
+ font-family: Helvetica; |
|
| 197 |
+ font-size: 12px; |
|
| 198 |
+ color: #000000; |
|
| 199 |
+ line-height: 14px; |
|
| 200 |
+} |